@charset "utf-8";
.container {
    /* 网格布局 */
    display: grid;
    /* 列宽 */
    grid-template-columns: 470px 470px 470px;
    /* 行高 */
    grid-template-rows: 200px 200px 200px;
    /* 网格间距 */
    grid-gap: 10px;
}

.item {
    background: orange;
    font: bold 32px "微软雅黑";
    color: #ffffff;
    /* 弹性布局 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
}

.container .item:first-child {
    background: #0099ff;
}

.container .item:nth-child(5) {
    background: green;
}

.container .item:nth-child(6),
.container .item:nth-child(8) {
    background: violet;
}

.container .item:nth-child(2) {
    /* 行位置 开始/结束 */
    grid-row: 1/3;
    /* 列位置 开始/结束 */
    grid-column: 2/3;
}

.container .item:nth-child(7) {
    /* 列位置 开始/结束 */
    grid-column: 2/4;
}